<template>
	<view class="register">
		<view class="header flexR">
			<view class="left">
				<image :src="'../../static/images/'+routeParams.imagePath" mode="scaleToFill"></image>
			</view>
			<view class="right">
				<view class="name flexR">
					<view>
						<text>{{routeParams.name}}</text>
						<text v-if="routeParams.job">{{routeParams.job}}</text>
					</view>
					<!-- <text  class="iconfont" :class="starIcon" ></text> -->
					<u-icon v-if="routeParams.job!==undefined" :name="collection==1?'star-fill':'star'" size="46" color="#ffad37" @click="toCollect"></u-icon>
				</view>
				<view class="row text" v-if="routeParams.expertise">
					<text class="label">擅长：</text>{{routeParams.expertise}}
				</view>
				<!-- <view class="row" v-else>
					<text class="label">介绍：</text>
					<rich-text class="text" :nodes="routeParams.introductionHtml"></rich-text>
				</view> -->
			</view>
			<view class="position-bottom flexR">
				<view class="users flexR">
					<view class="name">
						<text class="iconfont icon-ren111"></text>
						<text>{{userInfo.name||''}}</text>
					</view>
					<view class="list" @click="onTClick">
						<text class="iconfont" :class="userNum>1?'icon-switchuser':'icon-svg-'"></text>
						<text>{{userNum>1?'切换':'添加'}}就诊人</text>
					</view>
				</view>
			</view>
		</view>
		<view class="register-main">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color='#3DDFD2' :bar-width='140'></u-tabs>
			<!-- 挂号内容 -->
			<view class="register-main-box" v-show="current==0">
				<view class="date">
					{{currentDate}}
				</view>
				<view class="table">
					<view class="thead flexR">
						<text>时间</text>
						<text>总数</text>
						<text>余号</text>
						<text>金额</text>
						<text>&emsp;&emsp;</text>
					</view>
					<view class="tbody">
						<view class="tbody-item flexR" v-for="(item , i ) in tableDate" :key='i'>
							<text>{{item.visitTime||'08:00 - 11:45'}}</text>
							<text>{{item.totalNumber||20}}</text>
							<text>{{item.availableNumber||12}}</text>
							<text>￥<text style="color: #ffad37;">{{item.totalMoney||'12.00'}}</text></text>
							<view class="btn" @click="toPage(item)"><text>{{isToday?'挂号':'预约'}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 医生介绍 -->
			<view class="introduce" v-show="current==1">
				<view class="introduce-item" v-if="routeParams.ex">
					<u-section title="擅长" :right="false" :bold='false' line-color='#3DDFD2' color="#000000"></u-section>
					<view class="text"> {{routeParams.expertise}} </view>
				</view>
				<view class="introduce-item">
					<u-section title="简介" :right="false" :bold='false' line-color='#3DDFD2' color="#000000"></u-section>
					<rich-text  class="text" :nodes="routeParams.introductionHtml"></rich-text>
				</view>
			</view>
		</view>
		<Load :load="load" />
		<List :showUserList='showUserList' @close='onClose'></List>


		<!-- 弹框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog v-if="sfscgh_dia" mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	var dayjs = require('dayjs')
	import { transWeek, transHtml } from '../../common/js/common.js'
	import { mapGetters } from 'vuex'
	import { getSourceList, getAppointment, getHisRegister } from '@/api/register.js'
	import {collectDoctor} from '@/api/otherService.js'
	import Load from '@/components/Load/index.vue'
	import List from '@/components/UserInfo/list.vue'
	export default {
		components:{ Load, List },
		data() {
			return {
				showUserList:false,
				routeParams:'',
				list: [{ name:'挂号' },{ name:'医生介绍' }],
				current:0,
				isToday:false,
				tableDate:[],
				load:true,
				chooseItem:'',
				collection:'',
				sfscgh_dia: false,
			}
		},
		computed:{
			...mapGetters(['userInfo','userList','baseApi']),
			currentDate(){
				let date = dayjs().format('YYYY-MM-DD'),
				week = transWeek(dayjs().day())
				return (date + ' ' + week)
			},
			userNum(){
				if(this.userList&&this.userList.length){
					return this.userList.length
				}else{
					return 0
				}
			}
		},
		onLoad(op) {
			this.execDate = op.execDate||''
			this.scheduleId = op.scheduleId||''
			this.deptCode = op.deptCode||''
			this.doctorCode = op.doctorCode||''
			this.collection = op.collection||''
			this.getCollectionStatus()
			this.isToday = this.execDate===dayjs().format('YYYYMMDD')? true: false;
			this.initData()
		},
		methods: {
			change(val){
				this.current = val
			},
			onClose(type){
				this[type] = false
			},
			onTClick(){
				if(this.userNum>1){
					this.showUserList = true
				}else{
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
				}
			},
			initData(){
				this.load = true
				let info = {
					execDate:this.execDate,
					scheduleId: this.scheduleId,
					deptCode: this.deptCode,
					doctorCode: this.doctorCode
				}
				getSourceList(info).then(data => {
					let res = data||[]
					res.forEach(item => {
						item.remarkHtml = transHtml(item.mark)
					})
					if(res.length){
						if(res[0].doctorCode){
							this.routeParams = {
								doctorCode:res[0].doctorCode,
								name:res[0].doctorName,
								job:res[0].jobTitle||'' + "/" + res[0].deptName||'',
								expertise:res[0].expertise,
								introductionHtml: transHtml(res[0].introduction),
								imagePath:res[0].imagePath
							}
						}else{
							this.routeParams = {
								name:res[0].deptName,
								introductionHtml: transHtml(res[0].introduction),
								imagePath:res[0].imagePath
							}
						}
					}
					this.tableDate = res
					this.load = false
				}).catch(e => { this.tableDate = []; this.load = false })
			},
			toPage(item){
				if(!this.userInfo.patId){
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
					return
				}
				this.chooseItem = item;
				// debugger
				const params = {
					fsdhx:this.chooseItem.daypartingNumber,
					ghrq:this.chooseItem.execDate,
					ghsjd:this.chooseItem.visitTime,
					ksdm:this.chooseItem.deptCode,
					ksmc:this.chooseItem.deptName,
					patId:this.userInfo.patId,
					pbmxid:this.chooseItem.scheduleId,
					ysdm:this.chooseItem.doctorCode,
					ysmc:this.chooseItem.doctorName,
					ghje:this.chooseItem.totalMoney,
					ghf:this.chooseItem.totalMoney,
					hyid:this.chooseItem.id,
					sfscgh:this.chooseItem.sfscgh,
				}
				// 首次挂号
				// if(params.sfscgh == true) {
					uni.navigateTo({
						url:'/pages/Pay/registerPay?params=' + JSON.stringify(params)
					})
				// } else { //非首次挂号
				// 	this.sfscgh_dia = true;
				// }
				
			},
			getCollectionStatus(){
				if(this.userInfo.patId){
					let params = {
						collectionType:1,
						doctorCode:this.doctorCode,
						patientId:this.userInfo.patId
					}
					getHisRegister(params).then(data => {
						let res = data||[]
						this.collection = res.length?1:0
					}).catch(e => {
						this.collection = 0
					})
				}
			},
			toCollect(){
				if(!this.userInfo.patId){
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
					return
				}
				this.load = true
				let params = {
					code:this.routeParams.doctorCode,
					collectionType:1,
					name:this.routeParams.name,
					patientId:this.userInfo.patId,
					collectionStatus:this.collection===1?0:1
				}
				collectDoctor(params).then(data => {
					this.load = false
					this.getCollectionStatus()
					this.$u.toast('操作成功')
				}).catch(e => {
					this.load = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register{
		.header{
			background-color: $theme-color-light;
			color: #fff;
			padding: 40rpx 30rpx 70rpx 30rpx;
			position: relative;
			height: 350rpx;
			>.left{
				width: 196rpx;
				height: 220rpx;
				>image{
					height: 100%;
					width: 100%;
					border-radius: 5rpx;
				}
			}
			>.right{
				margin-left: 30rpx;
				flex: 1;
				.name {
					margin-bottom: 34rpx;
					justify-content: space-between;
					align-items: flex-end;
					>view{
						font-size: 26rpx;
						text:first-child{
							font-size: 38rpx;
							margin-right: 20rpx;
						}
					}
					.iconfont{
						font-size: 46rpx;
					}
				}
				.row{
					font-size: 12px;
					margin-bottom: 10rpx;
					.label{
						font-weight: bold;
						width: 50px;
					}
				}
				.row:last-child{
					height: 45px;
					line-height: 15px;
					font-size: 12px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; // 作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp: 3; // 显示的行
				}
			}
			.position-bottom{
				position: absolute;
				bottom: -55rpx;
				left: 0;
				width: 100%;
				justify-content: center;
				align-items: center;
				height: 90rpx;
				.users{
					width: calc(100vw - 60rpx);
					height: 100%;
					background-color: #ffF;
					color: $text-color;
					border-radius: 6rpx;
					padding: 0 30rpx;
					justify-content: space-between;
					align-items: center;
					>.name{
						font-size: 32rpx;
						.iconfont{
							margin-right: 10rpx;
							font-size: 40rpx;
							color: $text-color-active;
						}
					}
					>.list{
						font-size: 28rpx;
						.iconfont{
							margin-right: 10rpx;
							font-size: 38rpx;
							color: $text-color-active;
						}
					}
				}
			}
		}
		.register-main{
			// 350是顶部  75 是top
			height: calc(100vh - 350rpx - 75rpx);
			background-color: #fff;
			margin-top: 75rpx;
			padding-bottom: 20rpx;
			.register-main-box{
				margin: 10rpx 30rpx;
				margin-bottom: 0;
				border: 1px solid #EFEFEF;
				>.date{
					line-height: 70rpx;
					margin-left: 20rpx;
					font-weight: bold;
				}
				.table{
					.thead,.tbody-item{
						height: 70rpx;
						text-align: center;
						align-items: center;
						>text:nth-of-type(1) {
							width: 30%;
						}
						>text:nth-of-type(2) {
							width: 15%;
						}
						>text:nth-of-type(3) {
							width: 15%;
						}
						>text:nth-of-type(4) {
							width: 20%;
						}
						>text:nth-of-type(5) {
							width: 20%;
						}
					}
					.thead{
						background: #EFEFEF;
					}
					.tbody{
						max-height: calc(100vh - 350rpx - 75rpx - 80rpx - 20rpx - 74rpx - 90rpx);
						overflow: scroll;
						.btn{
							flex: 1;
							>text{
								padding: 6rpx 26rpx;
								border: 1px solid $theme-color-light;
								color: $theme-color-light;
								font-size: 24rpx;
								border-radius: 6rpx;
							}
						}
						>.tbody-item:nth-of-type(2n){
							background-color: #F9F9F9;
						}
					}
				}
			}
			.introduce{
				margin: 10rpx 30rpx;
				height: calc(100vh - 350rpx - 75rpx - 80rpx - 40rpx );
				.introduce-item{
					margin-top: 20rpx;
					>.text{
						margin: 20rpx 0 30rpx 0;
						text-indent: 2em;
						max-width: calc(100vw - 60rpx);
						// #ifdef H5
						>div{
							margin: 20rpx 0 30rpx 0;
						}
						// #endif
					}
				}
			}
		}
		.content{
			padding: 30rpx;
		}
	}
</style>
